<template>
  <div class="attendances">
    <el-card>
      <PageTools :show-before="true">
        <span slot="before">有0条考勤审批尚未处理</span>
        <template slot="after">
          <el-button type="primary">导入</el-button>
          <el-button type="primary">提示</el-button>
          <el-button type="primary">设置</el-button>
          <el-button type="primary">历史归档</el-button>
          <el-button type="primary">月份报表</el-button>
        </template>
      </PageTools>
      <el-card>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="部门:">
            <el-checkbox-group v-model="form.type">
              <el-checkbox v-for="item in typeList" :key="item" :label="item" name="type" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="考勤状态">
            <el-radio-group v-model="form.resource">
              <el-radio label="正常" />
              <el-radio label="旷工" />
              <el-radio label="事假" />
              <el-radio label="调休" />
              <el-radio label="迟到" />
              <el-radio label="早退" />
            </el-radio-group>
          </el-form-item>

        </el-form>
      </el-card>

      <!-- 表格 -->
      <div class="table">
        <template>
          <el-table
            :data="lessList"
            border
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
            >
              <template #default="{$index}">
                {{ (page.page-1)*page.size+$index+1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="username"
              label="姓名"
              width="80"
            />
            <el-table-column
              prop="workNumber"
              label="工号"
            />
            <el-table-column
              prop="departmentName"
              label="部门"
              width="123"
            />
            <el-table-column
              prop="mobile"
              label="手机"
              width="120"
            />
            <el-table-column
              v-for="i in 30"
              :key="i"
              :label="'3/'+i"
            >
              <template #default="{row}">
                {{ row.attendanceRecord[i].adtStatu | formatEmployees }}
              </template>
            </el-table-column>
            <!-- <el-table-column
              prop="attendanceRecord[1].adtStatu"
              label="3/2"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[2].adtStatu"
              label="3/3"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[3].adtStatu"
              label="3/4"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[4].adtStatu"
              label="3/5"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[5].adtStatu"
              label="3/6"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[6].adtStatu"
              label="3/7"
              :formatter="formatEmployee"
            /><el-table-column
              prop="attendanceRecord[7].adtStatu"
              label="3/8"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[8].adtStatu"
              label="3/9"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[9].adtStatu"
              label="3/10"
              :formatter="formatEmployee"
            /><el-table-column
              prop="attendanceRecord[10].adtStatu"
              label="3/11"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[11].adtStatu"
              label="3/12"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[12].adtStatu"
              label="3/13"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[13].adtStatu"
              label="3/14"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[14].adtStatu"
              label="3/15"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[15].adtStatu"
              label="3/16"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[16].adtStatu"
              label="3/16"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[17].adtStatu"
              label="3/18"
              :formatter="formatEmployee"
            /><el-table-column
              prop="attendanceRecord[18].adtStatu"
              label="3/19"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[19].adtStatu"
              label="3/20"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[20].adtStatu"
              label="3/21"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[21].adtStatu"
              label="3/22"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[22].adtStatu"
              label="3/23"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[23].adtStatu"
              label="3/24"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[24].adtStatu"
              label="3/25"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[25].adtStatu"
              label="3/26"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[26].adtStatu"
              label="3/27"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[27].adtStatu"
              label="3/28"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[28].adtStatu"
              label="3/29"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[29].adtStatu"
              label="3/30"
              :formatter="formatEmployee"
            />
            <el-table-column
              prop="attendanceRecord[30].adtStatu"
              label="3/31"
              :formatter="formatEmployee"
            /> -->
          </el-table>
        </template>
      </div>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          :page-size="page.size"
          :total="page.total"
          :current-page="page.page"
          layout="prev, pager, next"
          @current-change="changePape"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getAttendancesListMock } from '@/api/attendances'
import attendance from '@/api/constant/attendance'
export default {
  filters: {
    formatEmployees(cellval) {
      try {
        const arr = attendance.holidayType
        // console.log(130, arr, cellval)
        const obj = arr.find(item => item.id === '' + cellval)
        return obj.value || '未知'
      } catch (error) {
        console.log(error)
      }
    }
  },
  data() {
    return {
      tableList: [],
      lessList: [],
      typeList: ['总裁办', '行政部', '人事部', '财务部', '技术部', '运营部', '市场部', '财务核算部', '税务管理部', '薪资管理部', 'Java研发部', 'Python研发部', 'Php研发部', '北京事业部', '上海事业部'],
      form: {
        name: '',
        type: [],
        resource: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      page: {
        page: 1, // 当前页
        size: 10, // 每页条数
        total: 0
      }
    }
  },
  async created() {
    const res = await getAttendancesListMock()
    console.log(res)
    this.tableList = res
    this.lessList = this.tableList.slice(0, 10)
    this.page.total = this.tableList.length
  },
  methods: {
    // 聘用形式数据处理
    formatEmployee(row, column, cellval, index) {
      // 默认返回 行 列 里面的值 索引
      // 补充:聘用形式数据可能不存在,需要对错误进行处理
      try {
        const arr = attendance.holidayType
        // console.log(130, arr, cellval)
        const obj = arr.find(item => item.id === '' + cellval)
        return obj.value || '未知'
      } catch (error) {
        console.log(error)
      }
    },
    // 切换页面
    changePape(curpage) {
      console.log(curpage)
      const startindex = (curpage - 1) * this.page.size
      this.lessList = this.tableList.slice(startindex, startindex + this.page.size)
      this.page.page = curpage
    }
  }
}
</script>

<style>
.attendances{
  background-color: #ccc;
}
.table{
  margin-top: 40px;
}
</style>
